<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>打卡记录界面</title>
    <!--<link rel="stylesheet" href="https://heerey525.github.io/layui-v2.4.3/layui-v2.4.5/css/layui.css">-->
    <link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
</head>

<!--设置layer时间选择器不显示秒-->
<style type="text/css">
    .layui-laydate-content > .layui-laydate-list {
        padding-bottom: 0px;
        overflow: hidden;
    }

    .layui-laydate-content > .layui-laydate-list > li {
        width: 50%
    }

    .merge-box .scrollbox .merge-list {
        padding-bottom: 5px;
    }
</style>
<body>

<div class="layui-layout layui-layout-admin">
    <!--头部导航栏-->
    <div class="layui-header">
        <a href="" th:href="@{/index}">
            <div class="layui-logo layui-hide-xs layui-bg-black">
                <i class="layui-icon layui-icon-home" style="font-size: 35px"></i> 主页
            </div>
        </a>

        <!-- 头部区域（可配合layui 已有的水平导航） 导航栏 -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>
            <li class="layui-nav-item layui-hide-xs">
                <a  href="" th:href="@{/punch}">打卡记录处理</a>
            </li>

        </ul>
        <!--导航栏右边个人信息-->
        <ul class="layui-nav layui-layout-right ">
            <span style="color: white;border: solid 0px;"
                  class="layui-btn  layui-btn-lg layui-btn-primary layui-border-danger">
                <i class="layui-icon layui-icon-console" style="font-size: 25px"></i>
                <strong th:include="time"></strong>
            </span>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-notice" style="font-size: 18px"></i>请假消息
                    <span class="layui-badge" id="leaveRequestSum"></span>
                </a>
            </li>
            <li class="layui-nav-item layui-hide layui-show-md-inline-block" style="margin-right: 20px">
                <a href="javascript:;">
                    <span id="userName" th:text="${session.admin.getAdminNumber()}"></span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a>详细信息</a></dd>
                    <dd><a>设置</a></dd>
                    <dd><a href="" th:href="@{/logout}">退出</a></dd>
                </dl>
            </li>
            <button class="layui-btn layui-btn-radius layui-btn-primary layui-border-green">
                <i class="layui-icon layui-icon-group" style="font-size: 18px"></i>在线人数:
                <span th:text="${application.loginCount}"></span></button>
        </ul>
    </div>

    <!--左侧导航栏-->
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item ">
                    <a a href="" th:href="@{/index}">员工信息管理</a>
                </li>
                <li class="layui-nav-item">
                    <a a href="" th:href="@{/punch}">打卡记录处理</a>
                </li>
                <li class="layui-nav-item"><a  href="" th:href="@{/news}">通知新闻界面</a></li>
                <li class="layui-nav-item"><a href="" th:href="@{/logout}">退出</a></li>
            </ul>
        </div>
    </div>
    <strong th:text="${mess}" id="messInfo" style="display: none"></strong>
    <div class="layui-body"><br>
        <!--显示当前的打卡时间-->
        <div style="margin-left: 20px;" class="layui-col-lg12">
            <!--显示打卡时间盒子-->
            <div class="layui-col-lg8">
                <h3>
                    <i class="layui-icon layui-icon-date" style="color: #009f95;"></i>
                    当前打卡时间为:
                    <i class="layui-icon layui-icon-log" style="color: #009f95"></i> 上午上班:<strong
                        id="mor-on-time"></strong>
                    <i class="layui-icon layui-icon-log" style="color: #009f95"></i> 上午下班: <strong
                        id="mor-off-time"></strong>
                    <i class="layui-icon layui-icon-log" style="color: #009f95"></i> 下午上班:<strong
                        id="aft-on-time"></strong>
                    <i class="layui-icon layui-icon-log" style="color: #009f95"></i> 下午下班: <strong
                        id="aft-off-time"></strong>
                    <button id="updateCheckTime" class="layui-btn  layui-btn-primary layui-border-green"
                            style="margin-left: 20px"> 修 改
                    </button>
                </h3>
            </div>
            <!--右上角表格标题-->
            <div class="layui-col-lg4">
                <h2>
                    <i class="layui-icon layui-icon-form" style="color: #009f95;font-size: 30px;"></i>
                    <strong id="show-year"></strong>年
                    <strong id="show-month"></strong>月
                    <strong id="show-day"></strong>日的考勤记录汇总
                </h2>
            </div>
        </div>

        <!--考勤信息记录盒子-->
        <div class="layui-card" style="margin-top: 45px">
            <div class="layui-card-body">
                <div class="layui-tab layui-tab-brief" lay-filter="component-tabs-brief">
                    <ul class="layui-tab-title" style="z-index: 999;background-color: #9F9F9F">
                        <li class="layui-this" style="width: 16%">
                            <i class="layui-icon layui-icon-table" style="font-size: 18px"></i>上午考勤记录表
                        </li>
                        <li style="width: 16%">
                            <i class="layui-icon layui-icon-table" style="font-size: 18px"></i>上午缺勤记录表
                        </li>
                        <li style="width: 16%">
                            <i class="layui-icon layui-icon-table" style="font-size: 18px"></i>下午考勤记录表
                        </li>
                        <li style="width: 16%">
                            <i class="layui-icon layui-icon-table" style="font-size: 18px"></i>下午缺勤记录表
                        </li>
                        <li style="width: 16%">
                            <i class="layui-icon layui-icon-table" style="font-size: 18px"></i>请假记录表
                        </li>
                    </ul>
                    <div class="test-table-reload-btn" style="margin-top: 10px;z-index: 9999;position: absolute">
                        <!--查询日期盒子-->
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="query-date" autocomplete="off"
                                       placeholder="点击选择日期" style="border: #009f95 solid 1px">
                            </div>
                        </div>
                        <a class="layui-btn layui-btn-primary layui-border-green" id="query-date-btn">查询</a>
                        <a class="layui-btn layui-btn-primary layui-border-green" id="query-all-btn">查询所有记录</a>
                    </div>
                    <div class="layui-tab-content" style="margin-top: -20px;z-index: 5">
                        <!--上午考勤记录表-->
                        <div class="layui-tab-item layui-show">
                            <table class="layui-hide" id="mor-row" lay-filter="mor-row"></table>
                        </div>
                        <!--上午缺勤记录表-->
                        <div class="layui-tab-item">
                            <table class="layui-hide" id="mor-absence-emp" lay-filter="mor-absence-emp"></table>
                        </div>
                        <!--下午考勤记录表-->
                        <div class="layui-tab-item">
                            <table class="layui-hide" id="aft-row" lay-filter="aft-row"></table>
                        </div>
                        <!--下午缺勤记录表-->
                        <div class="layui-tab-item">
                            <table class="layui-hide" id="aft-absence-emp" lay-filter="aft-absence-emp"></table>
                        </div>
                        <!--请假记录表-->
                        <div class="layui-tab-item">
                            <table class="layui-hide" id="leave-row" lay-filter="leave-row"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- <table class="layui-hide" id="allEmp" lay-filter="allEmp" style="margin-top: -50px"></table>-->
    </div>


    <!--员工请假消息盒子-->
    <div id="leave-mes-box" style="margin-left:30px;display :none;width: 300px;">
    </div>

    <!--<div class="layui-footer">
      &lt;!&ndash; 底部固定区域 &ndash;&gt;
      底部固定区域
    </div>-->
</div>
</body>
<!--<script src="https://heerey525.github.io/layui-v2.4.3/layui-v2.4.5/layui.js"></script>-->
<script src="../static/layui/layui.js"></script>
<script src="../static/js/jquery-3.1.0.js"></script>


<!--表格操作栏-->


<!--表格头部工具栏-->


<script type="text/javascript">
    //JS
    layui.use(['element', 'layer', 'util', 'jquery', 'table', 'laydate'], function () {
        var element = layui.element
            , layer = layui.layer
            , util = layui.util
            , table = layui.table
            , admin = layui.admin
            , laydate = layui.laydate
            , $ = layui.jquery;

        /*查询日期时间 标题初始化*/
        titleInit();
        function titleInit() {
            let now = new Date();
            let year = '0' + now.getFullYear();//获取年份
            let month = now.getMonth() + 1;//获取月份
            let day = now.getDate();//获取日期
            if (month < 10) month = '0' + month;
            if (day < 10) day = '0' + day;
            $("#show-year").html(year.substring(3, 5));
            $("#show-month").html(month);
            $("#show-day").html(day);
        }

        /*设置时间选择的盒子*/

        /*上午上班 时间限定再 7:00 到 10:00 */
        function setChooseTimeBox() {
            laydate.render({
                elem: '#test-laydate-limit1'
                , type: 'time'
                , min: '07:00:00'
                , max: '10:00:00'
                , btns: ['clear', 'confirm']
                , format: 'HH:mm'
            });
            /*上午下班 时间现在在 11:00点 到 12:30*/
            laydate.render({
                elem: '#test-laydate-limit2'
                , type: 'time'
                , min: '11:00:00'
                , max: '13:00:00'
                , btns: ['clear', 'confirm']
                , format: 'HH:mm'
            });
            /*下午上班 时间限制在 13:00 到 15:00*/
            laydate.render({
                elem: '#test-laydate-limit3'
                , type: 'time'
                , min: '13:00:00'
                , max: '15:00:00'
                , btns: ['clear', 'confirm']
                , format: 'HH:mm'
            });
            /*下午下班 限制在 16:00 到20:30*/
            laydate.render({
                elem: '#test-laydate-limit4'
                , type: 'time'
                , min: '16:00:00'
                , max: '20:30:00'
                , btns: ['clear', 'confirm']
                , format: 'HH:mm'
            });

        }


        /*获取当前打卡时间*/
        getCheckTime();
        function getCheckTime() {
            let url = "emp/getCheckTime";
            let param = {};
            $.get(url, param, function (data) {
                $("#mor-on-time").html(data.morOnTime);
                $("#mor-off-time").html(data.morOffTime);
                $("#aft-on-time").html(data.aftOnTime);
                $("#aft-off-time").html(data.aftOffTime);
                $("#test-laydate-limit1").val(data.morOnTime);
                $("#test-laydate-limit2").val(data.morOffTime);
                $("#test-laydate-limit3").val(data.aftOnTime);
                $("#test-laydate-limit4").val(data.aftOffTime);
            });
        }

        /*检测出request域中的信息*/
        let mess = $("#messInfo").text();
        if (mess == null || mess === "") {
        } else {
            layer.msg(mess, {offset: '250px', time: 1500, anim: 6});
            $("#messInfo").text("");
        }
        /*获取请假消息*/
        getLeaveRequestSum();

        function getLeaveRequestSum() {
            let url = "getLeaveRequestSum";
            let param = {};
            $.get(url, param, function (res) {
                $("#leaveRequestSum").html(res);
            });
        }

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function (othis) {
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            , menuRight: function () {
                let ii = layer.load(0, {shade: false});
                setTimeout(function () {
                    let url = "/getEmpLeaveRequest";
                    let param = {};
                    $.get(url, param, function (res) {
                        layer.close(ii);
                        $("#leave-mes-box").html("");
                        if (res.count == 0 || res.count === "0") {
                            let leaveRows = '<h3>暂时没有未处理的请假请求</h3>';
                            $("#leave-mes-box").append(leaveRows);
                        } else {
                            for (let i = 0; i < res.data.length; i++) {
                                let leaveRows = '<div  style="background-color: #009f95;color: #303030;padding: 5px;border-top-left-radius: 9px;border-top-right-radius: 9px;margin-top: 20px;border: #303030 solid 1px;" >\n' +
                                    '        <h3 style="margin-left: 10px">工  &nbsp;&nbsp;&nbsp;号：' + res.data[i].empNumber + '</h3>\n' +
                                    '        <h3 style="margin-left: 10px">' + res.data[i].empName + ' &nbsp;&nbsp;&nbsp;' + res.data[i].department + '：' + res.data[i].empPosition + '</h3>\n' +
                                    '    </div>\n' +
                                    '    <div  style="padding: 15px;border-left: #303030 solid 1px;border-right: #303030 solid 1px;">\n' +
                                    '        <strong>请假时间：</strong>' + res.data[i].leaveDate + res.data[i].leaveTime + '<br><br>\n' +
                                    '        <strong>请假理由：</strong>' + res.data[i].reason +
                                    '    </div>\n' +
                                    '    <div  style="margin-bottom:  10px;border: #303030 solid 1px;border-top: none">\n' +
                                    '        <button id="agree" class="layui-btn layui-btn-sm layui-btn-normal layui-btn-radius agree" style="margin-left: 160px" href="' + res.data[i].id + '" >批准</button>\n' +
                                    '        <button id="disagree" class="layui-btn layui-btn-sm layui-btn-danger layui-btn-radius disagree" style="margin-left: 10px" href="' + res.data[i].id + '">不批准</button><br><br>\n' +
                                    '    </div>';
                                $("#leave-mes-box").append(leaveRows);
                            }
                        }
                    });
                });
                layer.open({
                    type: 1
                    , content: $("#leave-mes-box")
                    , area: ['360px', '100%']
                    , offset: 'rt' //右上角
                    , anim: 5
                    , shadeClose: true
                    , end: function (res) {
                        $("#leave-mes-box").css("display", 'none');
                    }
                });
            }
        });


        //处理员工请假处理
        //批准请假
        $(document).delegate("#agree", "click", function () {
            let requestId = $(this).attr("href");//获得元素的属性值
            layer.confirm('确定批准该员工的请假请求吗？', function () {
                dealLeaveRequest(1, requestId)
            });
            return false;
        });
        //不批准
        $(document).delegate("#disagree", "click", function () {
            let requestId = $(this).attr("href");//获得元素的属性值
            layer.confirm('确定不批准该员工的请假请求吗？', function () {
                dealLeaveRequest(2, requestId)
            });
            return false;
        });

        function dealLeaveRequest(result, requestId) {
            var ii = layer.load(0, {shade: false});
            setTimeout(function () {
                let url = "dealLeaveRequest";
                let param = {result: result, requestId: requestId};
                $.get(url, param, function (res) {
                    layer.closeAll();
                    if (res === true || res === "true") {
                        layer.open({
                            type: 1,
                            skin: 'layui-layer-admin',
                            closeBtn: false,
                            area: '350px',
                            anim: 5,
                            shadeClose: true,
                            icon: 1,
                            content: '<div class="layui-col-md12" style="padding: 20px" id="del-box">' +
                                '        <h3>处理成功 !</h3>' +
                                '        <button class="layui-btn" style="float: right;margin-top: 20px" id="check-rquerst-ok">确定</button>' +
                                '    </div>',
                            title: '处理结果'
                        });
                        //执行删除操作前管理员要输入管理员操作密码
                        $("#check-rquerst-ok").click(function () {
                            window.location = '/punch';
                        });
                    } else {
                        layer.alert('处理失败', {skin: 'layui-layer-molv'});
                    }
                });
            });
        }

        /*修改打卡时间*/
        $("#updateCheckTime").click(function () {
            layer.open({
                type: 1,
                skin: 'layui-layer-rim',
                area: ['420px', '190px'],
                content: '<div class="layui-col-md12" style="padding: 20px" id="del-box">' +
                    '        <input type="password" id="operaPass" placeholder="敏感操作需输入管理员密码" autocomplete="off" class="layui-input" style="border: black solid 1px">' +
                    '        <button class="layui-btn" style="float: right;margin-top: 20px" id="delEmpByNumber">确定</button>' +
                    '    </div>',
                title: '敏感操作需输入管理员密码'
            });
            $("#delEmpByNumber").click(function () {
                let operaPass = $("#operaPass").val();
                if (operaPass === null || operaPass === "") {
                    layer.msg('输入管理员密码', {offset: '250px', time: 1500, anim: 6});
                    return false;
                }
                var ii = layer.load(0, {shade: false});
                layer.closeAll('page'); //关闭所有的页面层
                setTimeout(function () {
                    let url = "checkPass";
                    let param = {operaPass: operaPass};
                    $.post(url, param, function (res) {
                        layer.close(ii);
                        if (res === true || res === "true") {
                            layer.closeAll();
                            layer.open({
                                type: 1
                                , content: '<div id="choose-time-box">\n' +
                                    '            <div class="layui-inline">\n' +
                                    '                <label class="layui-form-label">上午上班:</label>\n' +
                                    '                <div class="layui-input-inline" style="border: #009f95 solid 1px">\n' +
                                    '                    <input type="text" class="layui-input" id="test-laydate-limit1" >\n' +
                                    '                </div>\n' +
                                    '            </div>\n' +
                                    '            <div class="layui-inline">\n' +
                                    '                <label class="layui-form-label">上午下班:</label>\n' +
                                    '                <div class="layui-input-inline" style="border: #009f95 solid 1px">\n' +
                                    '                    <input type="text" class="layui-input" id="test-laydate-limit2" >\n' +
                                    '                </div>\n' +
                                    '            </div><br><br>\n' +
                                    '            <div class="layui-inline">\n' +
                                    '                <label class="layui-form-label">下午上班:</label>\n' +
                                    '                <div class="layui-input-inline" style="border: #009f95 solid 1px">\n' +
                                    '                    <input type="text" class="layui-input" id="test-laydate-limit3" >\n' +
                                    '                </div>\n' +
                                    '            </div>\n' +
                                    '            <div class="layui-inline">\n' +
                                    '                <label class="layui-form-label">下午下班:</label>\n' +
                                    '                <div class="layui-input-inline" style="border: #009f95 solid 1px">\n' +
                                    '                    <input type="text" class="layui-input" id="test-laydate-limit4" >\n' +
                                    '                </div>\n' +
                                    '            </div>\n' +
                                    '        <button class="layui-btn" style="float: right;margin-top: 20px;margin-right: 55px" id="updateTime">确定</button>' +
                                    '        </div>'
                                , area: ['650px', '220px']
                                , anim: 0
                                , title: '修改打卡时间'
                            });
                            setChooseTimeBox();
                            getCheckTime();

                            $("#updateTime").click(function () {
                                layer.load(0, {shade: false});
                                setTimeout(function () {
                                    let morOnTime = $("#test-laydate-limit1").val();
                                    let morOffTime = $("#test-laydate-limit2").val();
                                    let aftOnTime = $("#test-laydate-limit3").val();
                                    let aftOffTime = $("#test-laydate-limit4").val();
                                    let url = "updateCheckTime";
                                    let param = {
                                        morOnTime: morOnTime,
                                        morOffTime: morOffTime,
                                        aftOnTime: aftOnTime,
                                        aftOffTime: aftOffTime
                                    };
                                    $.get(url, param, function (data) {
                                        layer.closeAll();
                                        if (data === true || data === "true") {
                                            getCheckTime();//刷新页面打卡时间
                                            layer.alert("修改成功");
                                        } else {
                                            layer.alert("修改失败");
                                        }
                                    });
                                });
                            });
                        } else if (res === false || res === "false") {
                            layer.msg('操作密码错误', {offset: '250px', time: 1500, anim: 6});
                        } else {
                            layer.msg('操作失败', {offset: '250px', time: 1500, anim: 6});
                        }
                    });
                });
            });
        });

        /*获取上午考勤表*/
        table.render({
            elem: '#mor-row'
            , toolbar: true
            , height: 500
            , url: '/getMorRowByDate'
            , skin: 'line'
            , title: '上午考勤信息'
            , cols: [
                [
                    {field: 'id', fixed: 'left', title: 'ID', align: 'center',}
                    , {field: 'empNumber', fixed: 'left', title: '员工号', align: 'center',}
                    , {field: 'empName', fixed: 'left', title: '姓名', align: 'center',}
                    , {
                    field: 'rowDate', title: '日期', align: 'center', templet: function (res) {
                        let year = res.rowDate.substring(0, 4);
                        let month = res.rowDate.substring(4, 6);
                        let day = res.rowDate.substring(6, 8);
                        return year + '-' + month + '-' + day;
                    }
                }
                    , {
                    field: 'morOn', title: '上班打卡时间', align: 'center', templet: function (res) {
                        return (res.morOn === null || res.morOn === '') ? '无打卡记录' : res.morOn;
                    }
                }
                    , {
                    field: 'onState', title: '状态', align: 'center', templet: function (res) {
                        if (res.onState === null || res.onState === "")
                            return "--";
                        else if (res.onState === 3 || res.onState === "3"){
                            return "请假";
                        }
                        return res.onState === "1" ? '正常' : '<span style="color: red">迟到</span>';
                    }
                }
                    , {
                    field: 'morOff', title: '下班打卡时间', align: 'center', templet: function (res) {
                        return (res.morOff === null || res.morOff === '') ? '无打卡记录' : res.morOff;
                    }
                }
                    , {
                    field: 'offState', title: '状态', align: 'center', templet: function (res) {
                        if (res.offState === null || res.offState === "")
                            return "--"
                        else if (res.offState === 3 || res.offState === "3"){
                            return "请假";
                        }
                        return res.offState === "1" ? '正常' : '<span style="color: red">早退</span>';
                    }
                }
                ]
            ]
            , text: {
                none: '没数据'
                ,
                error: '<br><br><br><i class="layui-icon" face style="color: #009f95;font-size: 150px;border-bottom: #009f95 solid 2px;padding:15px;margin-top: 30px" >&#xe664;</i><br>' +
                    '<br><div class="layui-text" style="font-size: 25px;margin-top: 15px;color: #009f95">\n' +
                    '      好像出错了呢\n' +
                    '    </div>'
            }
            , loading: true
        });
        /*获取上午缺勤表*/
        table.render({
            elem: '#mor-absence-emp'
            , toolbar: true
            , height: 500
            , url: '/getMorAbsenceEmp'
            , skin: 'line'
            , title: '上午缺勤信息'
            , cols: [
                [
                    {field: 'empId', fixed: 'left', title: 'ID', align: 'center',}
                    , {field: 'empNumber', fixed: 'left', title: '员工号', align: 'center',}
                    , {field: 'empName', fixed: 'left', title: '姓名', align: 'center',}
                    , {field: 'department', title: '部门', align: 'center',}
                    , {field: 'empPosition', title: '职位', align: 'center',}
                    , {field: 'empTel', title: '联系电话', align: 'center',}
                    , {field: 'empEmail', title: '电子邮箱', align: 'center',}
                    , {field: 'address', title: '住址', align: 'center',}

                ]
            ]
            , text: {
                none: '<br><br><br><i class="layui-icon" face style="color: #009f95;font-size: 150px;border-bottom: #009f95 solid 2px;padding:15px;margin-top: 30px" >&#xe664;</i><br>' +
                    '<br><div class="layui-text" style="font-size: 25px;margin-top: 15px;color: #009f95">\n' +
                    '      好像没有到时间或者还没找到数据呢<br>请与当天上午下班打卡时间半小时后重新查询\n' +
                    '    </div>'
                ,
                error: '<br><br><br><i class="layui-icon" face style="color: #009f95;font-size: 150px;border-bottom: #009f95 solid 2px;padding:15px;margin-top: 30px" >&#xe664;</i><br>' +
                    '<br><div class="layui-text" style="font-size: 25px;margin-top: 15px;color: #009f95">\n' +
                    '      好像出错了呢\n' +
                    '    </div>'
            }
            , loading: true
        });

        /*获取下午考勤表*/
        table.render({
            elem: '#aft-row'
            , toolbar: true
            , height: 500
            , url: '/getAftRowByDate'
            , skin: 'line'
            , title: '下午考勤信息'
            , cols: [
                [
                    {field: 'id', fixed: 'left', title: 'ID', align: 'center'}
                    , {field: 'empNumber', fixed: 'left', title: '员工号', align: 'center'}
                    , {field: 'empName', fixed: 'left', title: '姓名', align: 'center'}
                    , {
                    field: 'rowDate', title: '日期', align: 'center', templet: function (res) {
                        let year = res.rowDate.substring(0, 4);
                        let month = res.rowDate.substring(4, 6);
                        let day = res.rowDate.substring(6, 8);
                        return year + '-' + month + '-' + day;
                    }
                }
                    , {
                    field: 'aftOn', title: '上班打卡时间', align: 'center', templet: function (res) {
                        return (res.aftOn === null || res.aftOn === '') ? '无打卡记录' : res.aftOn;
                    }
                }
                    , {
                    field: 'onState', title: '状态', align: 'center', templet: function (res) {
                        if (res.onState === null || res.onState === "")
                            return "--"
                        else if (res.onState === 3 || res.onState === "3"){
                            return "请假";
                        }
                            return res.onState === "1" ? '正常' : '<span style="color: red">迟到</span>';
                    }
                }
                    , {
                    field: 'aftOff', title: '下班打卡时间', align: 'center', templet: function (res) {
                        return (res.aftOff === null || res.aftOff === '') ? '无打卡记录' : res.aftOff;
                    }
                }
                    , {
                    field: 'offState', title: '状态', align: 'center', templet: function (res) {
                        if (res.offState === null || res.offState === "")
                            return "--"
                        else if (res.offState === 3 || res.offState === "3"){
                            return "请假";
                        }
                        return res.offState === "1" ? '正常' : '<span style="color: red">早退</span>';
                    }
                }
                ]
            ]
            , text: {
                none: '<br><br><br><i class="layui-icon" face style="color: #009f95;font-size: 150px;border-bottom: #009f95 solid 2px;padding:15px;margin-top: 30px" >&#xe664;</i><br>' +
                    '<br><div class="layui-text" style="font-size: 25px;margin-top: 15px;color: #009f95">\n' +
                    '      好像没有到时间或者还没找到数据呢<br>请于当天下午上班打卡时间半小时后重新查询\n' +
                    '    </div>'
                ,
                error: '<br><br><br><i class="layui-icon" face style="color: #009f95;font-size: 150px;border-bottom: #009f95 solid 2px;padding:15px;margin-top: 30px" >&#xe664;</i><br>' +
                    '<br><div class="layui-text" style="font-size: 25px;margin-top: 15px;color: #009f95">\n' +
                    '      好像出错了呢\n' +
                    '    </div>'
            }
            , loading: true
        });

        /*获取下午缺勤表*/
        table.render({
            elem: '#aft-absence-emp'
            , toolbar: true
            , height: 500
            , url: '/getAftAbsenceEmp'
            , skin: 'line'
            , title: '上午缺勤信息'
            , cols: [
                [
                    {field: 'empId', fixed: 'left', title: 'ID', align: 'center',}
                    , {field: 'empNumber', fixed: 'left', title: '员工号', align: 'center',}
                    , {field: 'empName', fixed: 'left', title: '姓名', align: 'center',}
                    , {field: 'department', title: '部门', align: 'center',}
                    , {field: 'empPosition', title: '职位', align: 'center',}
                    , {field: 'empTel', title: '联系电话', align: 'center',}
                    , {field: 'empEmail', title: '电子邮箱', align: 'center',}
                    , {field: 'address', title: '住址', align: 'center',}

                ]
            ]
            , text: {
                none: '<br><br><br><i class="layui-icon" face style="color: #009f95;font-size: 150px;border-bottom: #009f95 solid 2px;padding:15px;margin-top: 30px" >&#xe664;</i><br>' +
                    '<br><div class="layui-text" style="font-size: 25px;margin-top: 15px;color: #009f95">\n' +
                    '      好像没有到时间或者还没找到数据呢<br>请于当天下午下班打卡时间半小时后重新查询\n' +
                    '    </div>'
                ,
                error: '<br><br><br><i class="layui-icon" face style="color: #009f95;font-size: 150px;border-bottom: #009f95 solid 2px;padding:15px;margin-top: 30px" >&#xe664;</i><br>' +
                    '<br><div class="layui-text" style="font-size: 25px;margin-top: 15px;color: #009f95">\n' +
                    '      好像出错了呢\n' +
                    '    </div>'
            }
            , loading: true
        });


        /*获取所有请假信息*/
        table.render({
            elem: '#leave-row'
            , toolbar: true
            , height: 500
            , url: '/getLeaveRowByDate'
            , skin: 'line'
            , title: '员工请假记录信息'
            , cols: [
                [
                    {field: 'id', fixed: 'left', title: 'ID', align: 'center', width: 50}
                    , {field: 'empNumber', fixed: 'left', title: '员工号', align: 'center', width: 120}
                    , {field: 'empName', fixed: 'left', title: '姓名', align: 'center', width: 80}
                    , {field: 'department', title: '部门', align: 'center', width: 80}
                    , {field: 'empPosition', title: '职位', align: 'center', width: 80}
                    , {
                    field: 'leaveDate', title: '请假日期', align: 'center', width: 150, templet: function (res) {
                        let year = res.leaveDate.substring(0, 4);
                        let month = res.leaveDate.substring(4, 6);
                        let day = res.leaveDate.substring(6, 8);
                        return year + '-' + month + '-' + day;
                    }
                }
                    , {field: 'leaveTime', title: '时间段', align: 'center', width: 80}
                    , {field: 'reason', title: '请假理由', align: 'center'}
                    , {
                    field: 'checkFlag', title: '是否处理', align: 'center', width: 100, templet: function (res) {
                        return res.checkFlag === 1 ? '已处理' : '未处理';
                    }
                }
                    , {
                    field: 'agreeFlag', title: '是否批准', align: 'center', width: 100, templet: function (res) {
                        return res.agreeFlag === 1 ? '已批准' : '未批准';
                    }
                }
                ]
            ]
            , text: {
                none: '<br><br><br><i class="layui-icon" face style="color: #009f95;font-size: 150px;border-bottom: #009f95 solid 2px;padding:15px;margin-top: 30px" >&#xe664;</i><br>' +
                    '<br><div class="layui-text" style="font-size: 25px;margin-top: 15px;color: #009f95">\n' +
                    '      好像没有找到数据呢\n' +
                    '    </div>', error: '出错了'
            }
            , loading: true
        });

        laydate.render({
            elem: '#query-date'
            , format: 'yyyyMMdd'
            , max: new Date().toLocaleString()
        });


        /*查询记录*/
        $("#query-date-btn").click(function () {
            let queryDate = $("#query-date").val();
            $("#show-year").html(queryDate.substring(2, 4));
            $("#show-month").html(queryDate.substring(4, 6));
            $("#show-day").html(queryDate.substring(6, 8));
            if (null == queryDate || "" === queryDate) {
                layer.msg('请选择日期', {offset: '250px', time: 1500, anim: 6});
            } else {
                /*重载上午打卡记录表格*/
                table.reload('mor-row', {
                    url: '/getMorRowByDate'
                    , where: {queryDate: queryDate} //设定异步数据接口的额外参数
                });
                table.reload('mor-absence-emp', {
                    url: '/getMorAbsenceEmp'
                    , where: {queryDate: queryDate} //设定异步数据接口的额外参数
                });
                table.reload('aft-absence-emp', {
                    url: '/getAftAbsenceEmp'
                    , where: {queryDate: queryDate} //设定异步数据接口的额外参数
                });
                /*重载下午打卡记录表格*/
                table.reload('aft-row', {
                    url: '/getAftRowByDate'
                    , where: {queryDate: queryDate} //设定异步数据接口的额外参数
                });
                table.reload('leave-row', {
                    url: '/getLeaveRowByDate'
                    , where: {queryDate: queryDate} //设定异步数据接口的额外参数
                });
            }
        });

        /*查询全部记录*/
        $("#query-all-btn").click(function () {
            $("#show-year").html("全");
            $("#show-month").html("-");
            $("#show-day").html("-");
            table.reload('mor-row', {url: '/getAllMorRow'});
            table.reload('aft-row', {url: '/getAllAftRow'});
            table.reload('leave-row', {url: '/getAllLeaveRow'});
        });


    });

</script>


</html>


